<template>
  <section class="account-panel b50">
    <van-row class="form-panel">
      <div class="tips">
        通过绑定的手机号码找回登录账号登录密码
      </div>
      <van-row :class="['item',active===1&&'on']">
        <van-field
            v-model="form.phone"
            clearable
            label-width="60px"
            type="number"
            maxlength="11"
            label="手机号"
            @focus="()=>{this.active=1}"
            @blur="()=>{this.active=-1}"
            placeholder="请输入手机号"
        />
      </van-row>

      <van-row :class="['item',active===2&&'on']">
        <van-row class="input">
          <van-field
              v-model="form.code"
              clearable
              label-width="60px"
              maxlength="6"
              type="number"
              label="验证码"
              @focus="()=>{this.active=2}"
              @blur="()=>{this.active=-1}"
              placeholder="请输入验证码"
          />
        </van-row>
        <div class="btns" @click="getPhoneCode">{{ captchaOnOff ? ('重新获取' + captchaNum + 's') : '获取验证码' }}</div>
      </van-row>


      <van-row :class="['item',active===3&&'on']">
        <van-field
            v-model="form.password"
            clearable
            label-width="60px"
            type="password"
            label="新密码"
            maxlength="20"
            @focus="()=>{this.active=3}"
            @blur="()=>{this.active=-1}"
            placeholder="请输入新密码"
        />
      </van-row>


      <van-row :class="['item',active===4&&'on']">
        <van-field
            v-model="form.repeatPassword"
            clearable
            label-width="60px"
            type="password"
            label="再次确认"
            maxlength="20"
            @focus="()=>{this.active=4}"
            @blur="()=>{this.active=-1}"
            placeholder="请输入再次确认"
        />
      </van-row>

    </van-row>
    <van-row class="footer-default">
      <div :class="['form-btns',disabled&&'disabled']" @click="onSubmit">确认</div>
    </van-row>

  </section>
</template>

<script>
import {BRStorage} from "../../utils/brStorage";

export default {
  data() {
    return {
      active: 1,
      inTime: null,
      captchaOnOff: false,
      captchaNum: 60,
      form: {
        phone: '',
        code: '',
        password: '',
        repeatPassword: '',
      }
    }
  },
  computed: {
    disabled() {
      return !this.form.phone || !this.form.code || !this.form.password || !this.form.repeatPassword
    }
  },
  created() {
    this.getLoad();
  },
  methods: {
    getLoad() {
      let queryData = this.$route.query;
      let runRomSystem = queryData.runRomSystem;
      if (this.BRIsSetString(runRomSystem)) {
        BRStorage.setStorage(BRStorage.KeyRunRomSystem(), runRomSystem);
      }
    },

    //获取验证码
    getPhoneCode() {
      let mPhone = this.form.phone;
      if (!this.BRIsPhone(mPhone)) {
        return false;
      }
      if (!this.captchaOnOff) {
        let params = {
          "phone": mPhone
        }
        this.$http(window.config.userHomeApi + '/info/forget/get_phone_code', params).then((res) => {
          let code = res.code;
          if (code === 1) {
            this.captchaOnOff = true;
            fn();
            this.inTime = setInterval(fn, 1000);
          } else {
            this.BRToast(res.msg);
          }
        });
        const fn = () => {
          this.captchaNum--;
          this.captchaBtn = this.captchaNum;
          if (this.captchaNum === 0) {
            this.captchaOnOff = false;
            this.captchaBtn = '获取验证码'
            clearInterval(this.inTime);
            this.captchaNum = 60;
          }
        }
      }
    },
    //确定绑定
    onSubmit() {
      let mPhone = this.form.phone;
      let mCode = this.form.code;
      let mPassword = this.form.password;
      let mRepeatPassword = this.form.repeatPassword;
      if (!this.BRIsPhone(mPhone)) {
        return false;
      }
      if (!this.BRIsCode(mCode)) {
        return false;
      }
      if (!this.BRIsSetString(mPassword)) {
        this.BRToast('请输入新密码');
        return false;
      }
      if (mPassword !== mRepeatPassword) {
        this.BRToast('密码不一致');
        return false;
      }
      let params = {
        "phone": mPhone,
        "phoneCode": mCode,
        "userTemp": mPassword,
      }
      this.$http(window.config.userHomeApi + '/info/forget/set_pass', params).then((res) => {
        let code = res.code;
        if (code !== 1) {
          this.BRToast(res.msg);
        } else {
          this.$router.push("/account/passwordGetBackSuccess");
        }
      });
    },

  }
};
</script>

<style scoped lang='less'>
@import "../../assets/css/account/index.less";
</style>